<template>
    <div>
        <el-form ref="ruleForm" :model="obj" :rules="rules">
            <el-row :gutter="1">
                <el-col :span="24">
                    <el-form-item label="文本 :" prop="text" :label-width="formLabelWidth2">
                        <el-input size="small" type="textarea" :rows="4" v-model="obj.text"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="24">
                    <el-form-item label="公钥 :" prop="publicKey" :label-width="formLabelWidth2">
                        <el-input size="small" v-model="obj.publicKey"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="24">
                    <el-form-item label="地址 :" :label-width="formLabelWidth2">
                        <span>{{address}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="24">
                    <el-form-item label=""  :label-width="formLabelWidth2">
                        <el-button type="primary" size="small" @click="encryption">加密</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="24">
                    <el-form-item label="密文 :"  :label-width="formLabelWidth2">
                        <el-input size="small" readonly  type="textarea" :rows="4" v-model="msg"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="24">
                    <el-form-item label=""  :label-width="formLabelWidth2">
                        <el-button type="primary" size="small" @click="qrCodeClick">密文二维码</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-dialog
            title=""
            :visible.sync="qrCodeDialog"
            width="100%"
            :before-close="qrCodeContainerDestroy">
            <div v-if="qrCodeDestroy" style="display: flex; overflow: auto;">
                <div v-for="(item,index) in msgs" class="qrContainer">
                    <div :id="index" class="qrContent"></div>
                    <div class="qrSign">{{(index+1)+'/'+msgs.length}}</div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: 'textEncryption',
        data(){
            return{
                formLabelWidth1: '60px',
                formLabelWidth2: '80px',
                formLabelWidth3: '100px',
                obj:{
                    text: '',
                    publicKey: '',
                },
                rules: {
                    text: [
                        {required: true, message: '请输入文本', trigger: ['blur', 'change']}
                    ],
                    publicKey: [
                        {required: true, message: '请输入公钥', trigger: ['blur', 'change']}
                    ]
                },
                msg: '',
                address: '',
                qrCodeDialog: false,
                qrCodeDestroy: false,

            }
        },
        props: ['proParm'],
        computed: {
            msgs(){
                let length = this.msg.length;
                let num = Math.ceil(length/200);
                let array = [];
                for (let i=0; i<num; i++){
                    let m = this.msg.substring(i*200,(i+1)*200);
                    array.push(m);
                }
                return array;
            }
        },
        methods:{
            encryption(){
                this.$refs['ruleForm'].validate(async (valid) => {
                    if (valid) {
                        try {
                            let msg = encryptData(this.obj.text, this.obj.publicKey);
                            this.msg = msg;
                            let address = getPublickKeyAddress(this.proParm, this.obj.publicKey);
                            this.address = address;
                            console.log(msg);
                        }
                        catch(error) {
                            this.$message({
                                type: 'error',
                                message: '公钥格式错误'
                            })
                        }
                    }
                    else {
                        return false;
                    }
                })
            },
            qrCodeContainerDestroy(){
                this.qrCodeDestroy = false;
                this.qrCodeDialog = false;
            },
            qrCodeClick(){
                if(this.msg === ''){
                    this.$message.error('请先获取密文');
                    return;
                }
                this.qrCodeDialog = true;
                this.qrCodeDestroy = true;
                this.$nextTick(()=>{
                    this.msgs.forEach((item,index)=>{
                        let qrCode = new QRCode(document.getElementById(index), {
                            width: 200,
                            height: 200
                        });
                        qrCode.makeCode(item);
                    })
                });
            }
        }
    }
</script>

<style scoped lang="less">

    .qrContainer{
        display: inline-block;
    }

    .qrContent{
        display: inline-block;
        width: 200px;
        height: 200px;
        margin: 10px;
    }

    .qrSign{
        width: 200px;
        height: 30px;
        line-height: 30px;
        text-align: center;
    }

</style>
